<template>
  <div class="quality">
    <a v-for="(wine, index) of wineList" :key="index" :href="url+'/group_view.htm?id='+wine.id" class="quality-router">
      <img :src="url+wine.img">
      <p class="goods-title">{{wine.name}}</p>
      <p class="goods-time">{{wine.time}}</p>
    </a>
  </div>
</template>

<script>
  export default{
    name: 'qualityWine',
    props: ['wineList'],
    data () {
      return {
        url: 'http://www.finewest.cn'
      }
    }
  }
</script>

<style scope lang="scss">
  .quality{
    overflow: hidden;
    background: #ffffff;
    margin-bottom: 4px;
    .quality-router{
      display: block;
      float: left;
      margin: 10px 0;
      width: calc(50% - 1px);
      &:nth-child(odd){
        margin-right: 2px;
      }
      img{
        width: 100%;
        display: inherit;
      }
      p{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        margin: 0 12px;
      }
      p.goods-title{
        font-size: 11px;
        line-height: 11px;
        color: #000000;
        margin: 10px 12px 8px;
      }
      p.goods-time{
        font-size: 10px;
        color: #555555;
      }
    }
  }
</style>
